import { Component } from "react";
// import { Link, NavLink, Route } from "react-router-dom";
import { Route } from "react-router-dom";

import AppStyle from "./assets/App.module.css";
import User from "./pages/User/User";
import Home from "./pages/Home/Home";
import Header from "./components/Header/Header";
import MyNavlink from "./components/MyNavlink/MyNavlink";
/**
 * 1、最外层包裹了一个<BrowserRouter>或<HashRouter>
 * 2、路由切换使用Link/NavLink标签
 *    <Link to="/xxx"></Link>
 * 3、展示区用Route标签进行路径的匹配
 *    <Route path="匹配的路径" component={展示的组件}>
 * 4、路由组件props默认接收三个固定的属性：history、location、match
 * 5、一般组件props是标签传递了什么，则接收什么
 * 6、NavLink标签会在点击时“默认”增加一个“active” class属性名,此时可以设置点击样式
 *    为了防止命名冲突，可以设置activeClassName="xxx",将xxx设置为点击时增加的class属性名
 *
 */

class App extends Component {
  render() {
    return (
      <div className={AppStyle.page}>
        <Header id={"我是id"}></Header>
        <div className={AppStyle.container}>
          <div className={AppStyle.nav}>
            {/* 此时将mylink设置为点击时默认增加的class属性名 */}
            {/* 标签体内容“显示User”会以chlidren属性传递给组件 */}
            <MyNavlink to="/user">显示User</MyNavlink>
            <MyNavlink to="/home">显示Home</MyNavlink>

            {/* <NavLink activeClassName="mylink" className="link" to="/user">
              显示User
            </NavLink>
            <NavLink activeClassName="mylink" className="link" to="/home">
              显示Home
            </NavLink> */}
          </div>
          <div className={AppStyle.content}>
            <Route path="/user" component={User}></Route>
            <Route path="/home" component={Home}></Route>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
